<template>
  <div class="html1_2">
      <h1>1.2  HTML基本标签</h1>
      <div class="html1_2_1">
        <h2>1.2.1  元信息标签<meta></h2>
        <p v-text="'Meta标签是HTML中Head区的一个辅助性标签，<meta>标签位于HTML文件的头部， 即<head>与</head>之间。<meta>元素可提供有关网页的元信息，如关键字、页面描述、作者等信息，这些信息不显示在网页中，用户在浏览网页时看不到。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie,它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据定义的时间间隔刷新本页面的显示等。'"></p>
        <p v-text="'<meta>标签有多个属性，不同的属性有不同的参数值，这些不同的参数值就实现了不同的网页功能。<meta>标签常用的属性和取值如表2-1所示。'"></p>
        <p class="tab">表2-1  &lt;meta&gt;标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>charset</td>
            <td>character encoding</td>
            <td>定义文档的字符编码。</td>
          </tr>
          <tr>
            <td>content</td>
            <td>some text</td>
            <td>定义与 http-equiv 或 name 属性相关的元信息。content属性始终要和name属性或 http-equiv属性一起使用。</td>
          </tr>
          <tr>
            <td>http-equiv</td>
            <td>character encoding</td>
            <td>定义文档的字符编码。</td>
          </tr>
          <tr>
            <td>charset</td>
            <td>content-type|expires|refresh|set-cookie}Pragma(cache模式)|Content-Script-Type</td>
            <td>把content属性关联到HTTP头部。</td>
          </tr>
          <tr>
            <td>name</td>
            <td>Author|Copyright|description|keywords|generator|robots</td>
            <td>把content属性关联到一个名称。</td>
          </tr>
          <tr>
            <td>scheme</td>
            <td>some text</td>
            <td>定义用于翻译content属性值的格式</td>
          </tr>
        </table>
        <p>1.Name属性<br>属性的语法格式是：</p>
        <p>&lt;meta name="参数" content="参数值"&gt;</p>
        <p v-text="'name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。name属性有以下几种常用参数：'"></p>
        <p>(1) keywords（关键字）<br>
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。</p>
        <p>
          <pre>
【例2.4】
&lt;meta name="keywords" content="人民网,人民日报,中国共产党新闻,新闻中心"/&gt;
        (2) description（页面描述）
        description用于描述网页的主题等，设置页面描述也是为了便于搜索引擎的查找，一般要和关键字配合使用。现在所流行的搜索引擎如google, Lycos, AltaVista的工作原理：搜索引擎先派机器人自动在Web上搜索，当发现新的网站时，便检索页面的Keywords和Description，并将其加入到自己的数据库，然后再根据关键字的密度排序网站。
        【语法】
        &lt;meta name="description" content="页面描述" /&gt;
         在该语法中，name为属性名称，其值设置为description，也就是设置网页的页面描述；而在content属性中则定义页面描述具体内容。
        【例2.5】
        &lt;meta name="description" content="人民网，是世界十大报纸之一《人民日报》建设的以新闻为主的大型网上信息发布平台，也是互联网上最大的中文和多语种新闻网站之一。" /&gt;
        (3) generator（编辑工具）
        gener generator（编辑工具）ator用于说明网页编辑工具的名称。
        【语法】
       &lt;meta name="generator" content="编辑工具" /&gt;
       在该语法中，name为属性名称，其值设置为generator，也就是设置网页的编辑工具；而在content属性中则定义编辑工具的名称。
        【例2.6】
        &lt;meta name="generator" content="Visual Studio Code" /&gt;
        (4) author（作者）
        author用于说明网页的作者信息。
        【语法】
        &lt;meta name="author" content="作者" /&gt;
        在该语法中，name为属性名称，其值设置为author，也就是设置作者信息；而在content属性中则定义作者的具体信息。
        【例2.7】
        &lt;meta name="author" content="小钱" /&gt;
        (5) CopyRight（版权）
        copyright用于说明网页的版权信息。
        【语法】
        &lt;meta name="copyright" content="版权的所有者" /&gt;
        在该语法中，name为属性名称，其值设置为copyright，也就是设置版权信息；而在content属性中则定义版权的具体信息。
        【例2.8】
        &lt;meta name=" copyright " content="本页的版权属于小钱" /&gt;
        (6) robots（机器人向导）
        robots用于限制搜索引擎对网页的搜索方式。
        【语法】
        &lt;meta name="robots" content="搜索方式" /&gt;
        在该语法中，name为属性名称，其值设置为robots，也就是设置搜索引擎对网页的搜索方式；而在content属性中则定义具体的搜索方式。content的参数值有all、none、index、follow、noindex、nofollow，默认是all，content值与其对应的含义如表2-2所示。
          </pre>
        </p>
        <p class="tab">表2-2  content值与其对应的含义</p>
        <table border="1px">
          <tr>
            <th>content值</th>
            <th>含义</th>
          </tr>
          <tr>
            <td>all</td>
            <td>网页将被检索，且网页上的链接可以被查询</td>
          </tr>
          <tr>
            <td>none</td>
            <td>网页将不被检索，且网页上的链接不可以被查询</td>
          </tr>
          <tr>
            <td>index</td>
            <td>网页将被检索</td>
          </tr>
          <tr>
            <td>follow</td>
            <td>网页上的链接可以被查询</td>
          </tr>
          <tr>
            <td>noindex</td>
            <td>网页将不被检索，但网页上的链接可以被查询</td>
          </tr>
          <tr>
            <td>nofollow</td>
            <td>网页将被检索，但网页上的链接不可以被查询</td>
          </tr>
        </table>
        <p>
          <pre>
2. http-equiv属性
          http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
        当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
        http-equiv属性的语法格式是：
        &lt;meta http-equiv="参数" content="参数值"&gt;
          </pre>
        </p>
      </div>
      <div class="html1_2_2">
        <h2>1.2.2  文本标签</h2>
        <p>
          <pre>
1. 标题文字标签&lt;h1&gt;~&lt;h6&gt;
        HTML文件中包含各种级别的标题，它们是由&lt;h1&gt;到&lt;h6&gt;标签来定义的。其中，&lt;h1&gt;代表1级标题，级别最高，文字也最大，其他标签依次递减，&lt;h6&gt;级别最低。
          【语法】
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
        【说明】
          从一级标题到六级标题，是6个级别的标题，标题的字体大小以此递减。
       2. 文字格式标签&lt;font>
        &lt;font>标签用来控制文字的字体、字号和颜色等属性，设置不同的文字效果，它是HTML中最基本的标签之一。
        【语法】
          &lt;font face="字体1,字体2,..." size="字号" color="颜色">具体的文字&lt;/font&gt;
        【说明】
          通过face属性，可以设置文字的字体样式。需要注意的是，设置的字体样式必须是用户系统中已经安装的才可以正确浏览，否则这些特殊字体会被默认字体所替代。因此，最好使用系统默认情况下都包含的宋体、黑体等几种基本字体。face属性的值可以是一个或多个，默认情况下，使用第1种字体进行显示；如果第1种字体不存在，则用第2种字体进行代替，以此类推。
通过size属性，可以设置font 元素中文本的字号，其语法为&lt;font size="字号"&gt;，。字号的取值可以为1～7，数值越大，字体越大，浏览器默认值是 3。这个功能可以用css代替，其语法为 &lt;p style="font-size:20px"&gt;，具体使用参见第3章。
color 属性规定 font 元素中文本的颜色。其语法为&lt;font color="颜色"&gt;，颜色可以有3种形式:
          (1)color_name 规定颜色值为颜色名称的文本颜色（比如 "red"）。 W3C 的 HTML 4.0 标准仅支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
          (2) rgb_number 规定颜色值为 rgb 代码的文本颜色（比如 "rgb(255,0,0)"）。
这个功能可以用css代替，其语法为, &lt;p style="color:red"&gt;,，具体使用参见第3章。
          (3) hex_number 规定颜色值为十六进制值的文本颜色（比如 "#ff0000"）。
          用法RGB()函数使用下述公式计算表示颜色的长整数：
         65536 * Blue+ 256 * Green+ Red
          各分量中，数值越小，亮度越低，数值越大，亮度越高。
          例如，RGB ( 0, 0, 0 )为黑色（亮度最低），RGB ( 255, 255,255 )为白色（亮度最高）。
              <span style="color:red">•65536×255+255×255+255=16777215(D)= FFFFFF(H)</span>
        【例2.15】
         &lt;font face="黑体" size="7" color="#FF0000"&gt;字体为黑体、字号为7、颜色为红色&lt;/font&gt;
          </pre>
        </p>
        <img src="../assets/images/2.5.png" alt="">
        <p>图2-15 font实例</p>
        <p>
          <pre>
            3. 段落标签&lt;p>
段落标签&lt;p>的作用是划分段落。在使用时，可以省略结束标签&lt;/p>。
【语法】
&lt;p>段落文字&lt;/p>
【说明】
可以使用一对&lt;p>&lt;/p>来包含一个段落。也可以使用单独的开始标签&lt;p>来划分段落，每一个新的段落标签开始的同时也意味着上一个段落的结束。
与&lt;p>相关标签还有&lt;div>,&lt;span>
          </pre>
        </p>
        <img src="../assets/images/2.6.png" alt="">
        <p>图2-15 p实例</p>
        <p>
          <pre>
            4. 水平线标签&lt;hr>
水平线标签&lt;hr>的作用是在网页中创建一条水平线。&lt;hr>是一个单标签，没有结束标签。
【语法】
&lt;hr />
【说明】
在网页中输入一个&lt;hr />，就添加了一条默认样式的水平线。
          </pre>
        </p>
        <img src="../assets/images/2.7.png" alt="">
        <p>图2-15 hr实例</p>
        <p>
          <pre>
            5. 换行标签&lt;br>
换行标签&lt;br>的作用是在不另起一段的情况下将当前文本强制换行。&lt;br>是一个单标签，没有结束标签。
【语法】
&lt;br />
【说明】
一个&lt;br />代表一个换行，连续的多个&lt;br />可以实现多次换行。
          </pre>
        </p>
         <img src="../assets/images/2.8.png" alt="">
        <p>图2-15 br实例</p>
        <p>
          <pre>
            6. 空格
在网页中输入文字时，文字之间的多个连续的半角空格仅当一个来对待。如果需要保留空格的效果，一般需要使用全角空格，或者通过空格代码来实现。
【语法】
& nbsp;
【说明】
一个&nbsp;代表一个半角空格，连续的多个&nbsp;就是多个空格。
          </pre>
        </p>
         <img src="../assets/images/2.9.png" alt="">
         <img src="../assets/images/2.10.png" alt="">
        <p>图2-15 &nbsp;实例</p>
        <p>
          <pre>
            7. 特殊字符
除了空格以外，还有一些特殊符号也需要用代码来代替。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。其使用方法与空格符号类似，具体内容如表2-3所示。
          </pre>
        </p>
        <p class="tab">表2-3  特殊符号的表示</p>
        <table border="1px">
          <tr>
            <th>符号</th>
            <th>符号代码</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>"</td>
            <td>& quot;</td>
            <td>双引号</td>
          </tr>
          <tr>
            <td v-text="'<'"></td>
            <td>& lt;</td>
            <td>左尖括号</td>
          </tr>
          <tr>
            <td>></td>
            <td>& gt;</td>
            <td>右尖括号</td>
          </tr>
          <tr>
            <td>"</td>
            <td>& quot;</td>
            <td>双引号</td>
          </tr>
          <tr>
            <td>&</td>
            <td>& amp;</td>
            <td>&符号</td>
          </tr>
          <tr>
            <td>"</td>
            <td>& quot;</td>
            <td>双引号</td>
          </tr>
          <tr>
            <td>×</td>
            <td>& times</td>
            <td>乘号</td>
          </tr>
          <tr>
            <td>÷</td>
            <td>& divide;</td>
            <td>除号</td>
          </tr>
          <tr>
            <td>©</td>
            <td>& copy;</td>
            <td>版权符号</td>
          </tr>
          <tr>
            <td>®</td>
            <td>& reg;</td>
            <td>已注册商标符号</td>
          </tr>
          <tr>
            <td>™</td>
            <td>& trade;</td>
            <td>商标符号</td>
          </tr>
          <tr>
            <td>€</td>
            <td>& euro;</td>
            <td>欧元符号</td>
          </tr>
          <tr>
            <td>¥</td>
            <td>& yen;</td>
            <td>日元符合</td>
          </tr>
        </table>
      </div>
      <div class="html1_2_3">
          <h2>1.2.3  列表标签</h2>
          <p>
              <pre>
                  1.定义列表
HTML用&lt;dl>,&lt;dt>和&lt;dd>标签来创建一个普通的定义列表，其中&lt;dl> 标签定义了定义列表（definition list），&lt;dt>标签创建列表中的上层项目，&lt;dd>标签创建列表中最下层项目。自定义列表不仅仅是一列项目，而是项目及其注释的组合。
【语法】
&lt;dl>
  &lt;dt> （定义列表中的项目）&lt;/dt>
 &lt;dd> （描述列表中的项目）&lt;/dd>
 …
&lt;dt> （定义列表中的项目）&lt;/dt>
   &lt;dd> （描述列表中的项目）&lt;/dd>
   &lt;/dl>
【例2.16】个人信息的自定义列表。
&lt;dl>
        &lt;dt>姓名&lt;/dt>
           &lt;dd>小钱&lt;/dd>
        &lt;dt>性别&lt;/dt>
           &lt;dd>男&lt;/dd>
        &lt;dt>QQ&lt;/dt>
           &lt;dd>123456&lt;/dd>
&lt;/dl>
程序运行结果如图2-4所示。
              </pre>
          </p>
           <img src="../assets/images/2.11.png" alt="">
        <p>图2-4 自定义列表实例</p>
        <p>
            <pre>
                2.无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
【语法】
&lt;ul>
  &lt;li>列表项&lt;/li>
  …
&lt;li>列表项&lt;/li>
&lt;/ul>
其中li是list item的缩写，即列表项目。
【例2.17】无序的人员列表。
&lt;ul>
   &lt;li>党网·时政&lt;/li>
   &lt;li>人事&lt;/li>
   &lt;li>反腐&lt;/li>
   &lt;li>理论&lt;/li>
   &lt;li>党史&lt;/li>
   &lt;li>党建&lt;/li>
&lt;/ul>
程序运行结果如图2-5所示。
            </pre>
        </p>
        <img src="../assets/images/2.12.png" alt="">
        <p>图2-5  无序列表实例</p>
        <p>
            <pre>
                3.有序列表
有序列表也是一列项目，列表项目使用数字进行标记，常常用于文章标题列表排版，或者图片列表排版布局。
【语法】
&lt;ol>
  &lt;li>列表项&lt;/li>
  …
&lt;li>列表项&lt;/li>
&lt;/ol>
ol标签下不能直接放内容或其它标签，即使要放都必须放入li标签内，而li标签内可以再放ul ol等格式各样标签。无序列表和有序列表分别与Microsoft Word中项目符号和编号相对对应。它们的含义是一样的 
【例2.18】有序的人员列表。
&lt;ol>
      &lt;li>党网·时政&lt;/li>
   &lt;li>人事&lt;/li>
   &lt;li>反腐&lt;/li>
   &lt;li>理论&lt;/li>
   &lt;li>党史&lt;/li>
   &lt;li>党建&lt;/li>
&lt;/ol>
程序运行结果如图2-6所示。
            </pre>
        </p>
        <img src="../assets/images/2.13.png" alt="">
        <p>图2-6  有序列表实例</p>
        <p>
            <pre>
                不同类型的有序列表，序号可以表示为大写字母、小写字母、大写罗马数字、小写罗马数字和数字列表。
 【语法】
&lt;ol type="value">
  &lt;li>列表项&lt;/li>
  …
&lt;li>列表项&lt;/li>
&lt;/ol>
其中value取值为A，a,I和i，分别表示大写字母、小写字母、大写罗马数字、小写罗马数字。
【例2.19】不同类型的有序列表实例。
&lt;html>
&lt;body>

&lt;h4>数字列表：&lt;/h4>
&lt;ol>
 &lt;li>苹果&lt;/li>
 &lt;li>香蕉&lt;/li> 
&lt;/ol>  

&lt;h4>字母列表：&lt;/h4>
&lt;ol type="A">
 &lt;li>苹果&lt;/li>
 &lt;li>香蕉&lt;/li> 
&lt;/ol>  

&lt;h4>小写字母列表：&lt;/h4>
&lt;ol type="a">
 &lt;li>苹果&lt;/li>
 &lt;li>香蕉&lt;/li>
&lt;/ol>  

&lt;h4>罗马字母列表：&lt;/h4>
&lt;ol type="I">
 &lt;li>苹果&lt;/li>
 &lt;li>香蕉&lt;/li>
 &lt;li>柠檬&lt;/li>
 &lt;li>桔子&lt;/li>
&lt;/ol>  

&lt;h4>小写罗马字母列表：&lt;/h4>
&lt;ol type="i">
 &lt;li>苹果&lt;/li>
 &lt;li>香蕉&lt;/li>
&lt;/ol>  

&lt;/body>
&lt;/html>
运行结果如图2-7所示。
            </pre>
        </p>
        <img style="height:600px;width:200px;margin-left:455px;" src="../assets/images/2.14.png" alt="">
        <p>图2-7  不同类型的有序列表实例</p>
      </div>
      <div class="html1_2_4">
          <h2>2.2.4  表格标签</h2>
          <p>制作网页时，需要设计页面的版式或设计页面布局，以便阅读网页和保持页面美观  应该综合考虑安排的页面信息包括：导航、文字、图像、动画等。网页制作者可以将任何网页元素放进HTML的表格单元格中。定义表格常常会用到如表2-4所示的标记。</p>
          <p class="tab">表2-4 表格常用元素标签及说明</p>
          <table border="1px">
              <tr>
                  <th>标签</th>
                  <th>说明</th>
              </tr>
              <tr>
                  <td v-text="'<table>'"></td>
                  <td>表格标记</td>
              </tr>
              <tr>
                  <td v-text="'<tr>'"></td>
                  <td>行标记</td>
              </tr>
              <tr>
                  <td v-text="'<td>'"></td>
                  <td>表格数据</td>
              </tr>
              <tr>
                  <td v-text="'<th>'"></td>
                  <td>表头标记</td>
              </tr>
              <tr>
                  <td v-text="'<caption>'"></td>
                  <td>表格标题</td>
              </tr>
              <tr>
                  <td v-text="'<thead>'"></td>
                  <td>表头行</td>
              </tr>
              <tr>
                  <td v-text="'<tbody>'"></td>
                  <td>表头行</td>
              </tr>
              <tr>
                  <td v-text="'<tbody>'"></td>
                  <td>表主题</td>
              </tr>
              <tr>
                  <td v-text="'<tfoot>'"></td>
                  <td>表脚注</td>
              </tr>
          </table>
          <p>
              <pre>
                  1.插入表格&lt;table>
在HTML中，只要在需要使用表格的地方插入成对的&lt;table>&lt;/table>标记，就可以简单地完成表格的插入。
【语法】:
&lt;table>
&lt;tr>&lt;td>…&lt;/td>&lt;/tr>
…
&lt;/table>
2.设置表格标题 &lt;caption>
一般而言，表格都需要一个标题来对表格内容进行简单的说明。在HTML文件中，使用成对的标记&lt;caption>&lt;/caption>插入表格标题，该标题应用于&lt;table>标记与&lt;tr>标记之间的任何位置。
【语法】：
&lt;table>
    &lt;caption>插入表格标题&lt;/caption>
        &lt;tr>…&lt;/tr>
…
&lt;/table>
 
【例2.20】创建一个有标题的表格。
&lt;table>
    &lt;caption>点名册&lt;/caption>
  &lt;tr>&lt;th>学号&lt;/th>&lt;th>姓名&lt;/th>&lt;/tr>
  &lt;tr>&lt;td>0001&lt;/td>&lt;td>小钱&lt;/td>&lt;/tr>
  &lt;tr>&lt;td>0002&lt;/td>&lt;td>大钱&lt;/td>&lt;/tr>
&lt;/table>
运行结果如图2-8所示。
              </pre>
          </p>
          <img style="width:200px;margin-left:460px" src="../assets/images/2.15.png" alt="">
        <p>图2-9有标题的表格</p>
        <p>
            <pre>
                3.设置表格表头 &lt;th>
制作表格时，常常需要制作表头将表格中的元素属性分类，在网页文件中插入表格并需要给表格定义表头内容时，使用成对&lt;th>标记就可以实现，表头内容使用的是粗体样式显示，位于&lt;tr>和&lt;/tr>之间。
【语法】：
&lt;table>
&lt;tr> &lt;th>…&lt;/th>&lt;/tr>
&lt;tr>&lt;td>…&lt;/td>&lt;/tr>
…
&lt;/table>
 4.插入行 &lt;tr>
&lt;tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
【语法】：
&lt;table>
&lt;tr>…&lt;/tr>
&lt;tr>…&lt;/tr>
…
&lt;/table>
5.插入单元格数据&lt;td>
&lt;td> 标签定义 HTML 表格中的标准单元格。HTML 表格有两类单元格：表头单元 - 包含头部信息（由 th 元素创建）,标准单元 - 包含数据（由 td 元素创建）。
td 元素中的文本一般显示为正常字体且左对齐。
【语法】：
&lt;table>
&lt;tr> &lt;th>…&lt;/th>&lt;/tr>
&lt;tr>&lt;td>…&lt;/td>&lt;/tr>
…
&lt;/table>
&lt;td> 标签有2个重要的属性，跨行rowspan 和跨列colspan属性，单位是行或列数目。
【例2.21】创建一个跨行和跨列的表格。
&lt;table border="1">
  &lt;tr>&lt;td colspan=3"">关于跨行和跨列的例子&lt;/tr>
  &lt;tr>
    &lt;th>Month&lt;/th>
    &lt;th>Savings&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>January&lt;/td>
    &lt;td>$100.00&lt;/td>
    &lt;td rowspan="2">$50&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>February&lt;/td>
    &lt;td>$10.00&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>February&lt;/td>
    &lt;td>$10.00&lt;/td>
  &lt;/tr>
&lt;/table>
运行结果如图2-9所示。
            </pre>
        </p>
        <img style="width:200px;margin-left:460px" src="../assets/images/2.16.png" alt="">
        <p>图2-9 有跨行和跨列的表格</p>
        <p>
            <pre>
                6.设置划分结构表格&lt;thead>&lt;tbody>&lt;tfoot>
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地划分结构显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。所谓划分结构表格，指将一个表格分成三个部分在网页上显示，分别使用&lt;thead>&lt;/thead>、&lt;tbody>&lt;/tbody>、&lt;tfoot>&lt;/tfoot>标记。
【语法】：
&lt;table>
&lt;thead>&lt;/thead>
&lt;tbody>&lt;/tbody> 
&lt;tfoot>&lt;/tfoot>
&lt;/table>
&lt;thead>&lt;/thead>表示定义一组表头行；&lt;tbody>&lt;/tbody>定义表格主体部分；&lt;tfoot>&lt;/tfoot> &lt;tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
thead、tfoot 以及 tbody 元素能对表格中的行进行分组。当创建某个表格时，希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就"从头到脚"显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。
            </pre>
        </p>
      </div>
      <div class="html1_2_5">
          <h2>1.2.5  超级链接标签</h2>
          <p>
              <pre>
                  超链接是网页中最重要的元素之一。通过超链接的方式可以使各个网页之间连接，使网站中的众多页面构成一个有机整体。几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或者当前页面中的某个部分。通过使用&lt;a>标签在HTML中创建超链接。超链接可以是文本链接、图像链接，也可以是脚本链接、空链接。
1. 文本链接
网页中最常见的超链接是文本链接，它通过设置网页中的文字和其他的文件进行链接。
【语法】
&lt;a href="链接地址" target="目标窗口的打开方式">链接文字&lt;/a>
【说明】
通过href属性，可以设置链接地址。链接地址可以是同一个网站的内部链接，也可以是跳转到其他网站的外部链接，如某个网站地址、FTP地址、E-mail地址、下载文件地址等。
通过target属性，可以设置目标窗口的打开方式。target的取值有4种，如表2-5所示。
              </pre>
          </p>
          <p class="tab">表2-5  target值与其对应的含义</p>
          <table>
              <tr>
                  <th>target值</th>
                  <th>目标窗口的打开方式</th>
              </tr>
              <tr>
                  <td>_parent</td>
                  <td>在上一级窗口打开，常在分帧的框架页面中使用</td>
              </tr>
              <tr>
                  <td>_blank</td>
                  <td>新建一个窗口打开</td>
              </tr>
              <tr>
                  <td>_self</td>
                  <td>在同一窗口打开，与默认设置相同</td>
              </tr>
              <tr>
                  <td>_top</td>
                  <td>在浏览器的整个窗口中打开，将会忽略所有的框架结构</td>
              </tr>
          </table>
          <p>
              <pre>
                  【示例】
&lt;a href="http://www.baidu.com/" target="_blank">百度&lt;/a>
              </pre>
          </p>
          <video src="../assets/h5实例视频/a标签1.mp4" width="600px" controls></video>
          <p>
              <pre>
                  2. 图像链接
除了给文字设置超链接外，也可以给图像设置超链接。对于给整幅图像设置超链接来说，设置方法比较简单，与设置文本链接类似。
【语法】
&lt;a href="链接地址" target="目标窗口的打开方式">&lt;img src="图像文件的地址" />&lt;/a>
【示例】
&lt;a href="http://www.baidu.com/" target="_blank">&lt;img src="images/baidulogo.jpg" />&lt;/a>
              </pre>
          </p>
          <video src="../assets/h5实例视频/a标签2.mp4" width="600px" controls></video>
          <p>
              <pre>
                  3. 脚本链接
在链接语句中，可以通过脚本来实现HTML语言不能实现的功能，这种链接称为脚本链接。
【语法】
&lt;a href="javascript:脚本代码">文字链接&lt;/a>
【说明】
在javascript:后面添加的就是具体的脚本代码，可实现添加收藏夹、关闭窗口等功能。
【示例】
&lt;a href="javascript:window.close()">关闭窗口&lt;/a>
              </pre>
          </p>
          <video src="../assets/h5实例视频/a标签3.mp4" width="600px" controls></video>
          <p>
              <pre>
                  4. 空链接
空链接就是指单击该链接后仍然停留在当前页面。在代码中，可以通过#符号来实现空链接。
【语法】
&lt;a href="#">链接文字&lt;/a>
【说明】
通过href属性，设置其值为#实现空链接。
【示例】
&lt;a href="#">空链接&lt;/a>
              </pre>
          </p>
          <video src="../assets/h5实例视频/a标签4.mp4" width="600px" controls></video>
      </div>
      <div class="html1_2_6">
          <h2>1.2.6  图像标签</h2>
          <p>
              <pre>
                  网页中常见的图像格式有3种：GIF、JPEG、PNG。GIF格式分为静态GIF和动画GIF两种，仅支持256色，常用于导航条、按钮、商标等图像。对于照片之类的图像，通常采用JPEG格式。而PNG格式则具备了GIF格式的很多优点，同时还支持48bit的色彩。
在浏览网页时，经常可以看到各种图像。如果要在网页中插入图像，可以使用&lt;img>标签来实现，从而达到美化页面的效果。
【语法】
&lt;img src="图像文件的地址" width="图像的宽度" height="图像的高度" alt="图像的描述性文字" />
【说明】
通过src属性，可以设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。
通过width属性，可以设置图像的宽度。通过height属性，可以设置图像的高度。默认情况下，只改变图像的宽度或高度，图像的大小也会等比例进行调整。
通过alt属性，可以对图像进行简单的文字描述。在浏览网页时，当用户把鼠标光标移到图像上方，浏览器就会在一个文本框中显示图像的描述性文字。如果无法显示图像，则直接显示描述性文字。
【示例】
&lt;img src="./1.png" width="130" height="200" alt="乔丹"/>
              </pre>
          </p>
          <img style="width:200px;margin-left:460px" src="../assets/images/2.17.png" alt="">
        <p>图2.26  img标签实例</p>
      </div>
      <div class="html1_2_7">
          <h2>1.2.7  背景声音标签</h2>
          <p>
              <pre>
                  Internet Explorer 专用标签，打开网页的时候自动播放背景音乐。
【语法】
&lt;BGSound SRC=url  Loop=n1  BALANCE=n2  VOLUME=n3 >
bgsound 是 background sound 的缩写。
balance调整左右声道的音量平衡，取值范围 -10000～10000。指定播放回数。
Loop设置播放的次数，当指定为 infinite 或 -1 时无限循环播放。
SRC指定音乐文件。支持 *.wav, *.au, *.mid, *.aif 等格式。
VOLUME，调整音量，取值范围 -10000～0 。0 是最大音量。
【示例】
&lt;html>
&lt;head>
&lt;title>背景声音标签&lt;/title>
&lt;bgsound loop="infinite" src="sound/xxx.mid">
&lt;/head>
&lt;body>
&lt;/body>
&lt;/html>
              </pre>
          </p>
      </div>
      <div class="html1_2_8">
          <h2>1.2.8  视频标签</h2>
          <p>
              <pre>
网页中常见的多媒体文件包括动画文件、音频文件、视频文件等。如果要正确浏览嵌入了这些文件的网页，就需要在客户端的计算机中安装相应的播放软件。使用&lt;embed>标签可以将多媒体文件嵌入到网页中。
【语法】
&lt;embed src="多媒体文件的地址" width="嵌入内容的宽度" height="嵌入内容的高度" />
【说明】
通过src属性，可以设置多媒体文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。通过width属性，可以设置嵌入内容的宽度。通过height属性，可以设置嵌入内容的高度。
【示例】
&lt;embed src=
"http://flv3.people.com.cn/dev1/mvideo/vodfiles/2021/03/24/d358b8a5a598167eeaa0e8a90be81f0e_c.mp4" 
width="400" height="300" />
              </pre>
          </p>
          <video src="../assets/h5实例视频/视频标签.mp4" width="600px" controls></video>
      </div>
    </div>
</template>

<script>
export default {};
</script>

<style>
</style>